<mat-card>
  <mat-card-title>Popover</mat-card-title>
  <mat-card-content>
    <button mat-icon-button [popoverTriggerFor]="popover">
      <mat-icon>grade</mat-icon>
    </button>
    <stbui-popover #popover="stbuiPopover">
      <stbui-date-picker mode="landscape"></stbui-date-picker>
    </stbui-popover>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Positioning</mat-card-title>
  <mat-card-content>
    <div class="config">
      <mat-form-field>
        <mat-select [(ngModel)]="horizontalAlign" placeholder="horizontalAlign">
          <mat-option value="before">Before</mat-option>
          <mat-option value="start">Start</mat-option>
          <mat-option value="center">Center</mat-option>
          <mat-option value="end">End</mat-option>
          <mat-option value="after">After</mat-option>
          <mat-option value="octopus">Octopus</mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <mat-select [(ngModel)]="verticalAlign" placeholder="verticalAlign">
          <mat-option value="above">Above</mat-option>
          <mat-option value="start">Start</mat-option>
          <mat-option value="center">Center</mat-option>
          <mat-option value="end">End</mat-option>
          <mat-option value="below">Below</mat-option>
          <mat-option value="aardvark">Aardvark</mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <input matInput type="number" [(ngModel)]="margin" placeholder="anchor's margin-left (px)">
      </mat-form-field>
    </div>
    <button mat-raised-button color="accent" [style.marginLeft]="margin + 'px'">
      显示
    </button>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Action API</mat-card-title>
  <mat-card-content>
    <button mat-icon-button [popoverTriggerFor]="popover">
      <mat-icon>grade</mat-icon>
    </button>
    <stbui-popover #popover="stbuiPopover">
      <stbui-date-picker mode="landscape"></stbui-date-picker>
    </stbui-popover>

    <button mat-raised-button>popover#open()</button>
    <button mat-raised-button>popover#close()</button>
    <button mat-raised-button>popover#toggle()</button>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Scroll Strategies</mat-card-title>
  <mat-card-content>
    <mat-radio-group>
      <mat-radio-button *ngFor="let scrollOption of scrollOptions" [value]="scrollOption.value">
        {{scrollOption.name}}
      </mat-radio-button>
    </mat-radio-group>

    <div>
      <button mat-raised-button>显示</button>
    </div>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Focus Behavior</mat-card-title>
  <mat-card-content>
    <button mat-icon-button [popoverTriggerFor]="popover">
      <mat-icon>grade</mat-icon>
    </button>
    <stbui-popover #popover="stbuiPopover">
      <stbui-date-picker mode="landscape"></stbui-date-picker>
    </stbui-popover>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Custom Transitions</mat-card-title>
  <mat-card-content>
    <button mat-icon-button [popoverTriggerFor]="popover">
      <mat-icon>grade</mat-icon>
    </button>
    <stbui-popover #popover="stbuiPopover">
      <stbui-date-picker mode="landscape"></stbui-date-picker>
    </stbui-popover>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>文件上传</mat-card-title>
  <mat-card-content>
    <stbui-file-upload></stbui-file-upload>
  </mat-card-content>
</mat-card>